<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body>
		<div class="content">
			<div class="header">
				<div style="height:100%;width:100%;" id="slider" class="mui-slider">
					<div class="mui-slider-group  mui-slider-loop">
						<!--重复轮播-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<img src="img/background.png" />
						</div>
						<!--第一个内容区容器-->
						<div class="mui-slider-item">
							<img src="img/background.png" />
						</div>

						<!--第二个内容区-->
						<div class="mui-slider-item">
							<img src="img/background.png" />
						</div>

						<!--重复轮播-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<img src="img/background.png" />
						</div>
					</div>

					<!--轮播小圆点，需跟随轮播图数量-->
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
			</div>
<!--
			<div class="search">
				<button>模糊搜索</button>
			</div>-->

			<div class="options">
				<div class="list">
					<div class="image">
						<img src="img/writing.png" />
					</div>
					<div>录入数据</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/update.png" />
					</div>
					<div>更新进度</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/progress.png" />
					</div>
					<div>销售进度</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/order.png" />
					</div>
					<div>我的客户</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/team_order.png" />
					</div>
					<div>团队客户</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/release.png" />
					</div>
					<div>发布任务</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/history.png" />
					</div>
					<div>历史任务</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/public.png" />
					</div>
					<div>公号查看</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/out.png" />
					</div>
					<div>数据导出</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/password.png" />
					</div>
					<div>密码修改</div>
				</div>
				<div class="list">
					<div class="image">
						<img src="img/logout.png" />
					</div>
					<div>退出账号</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="">
				<img src="img/home2.png" />
				<div class="active">
					首页
				</div>
			</div>
			<div class="">
				<img src="img/search.png" />
				<div class="">
					搜索
				</div>
			</div>
			<div class="">
				<img src="img/mine.png" />
				<div class="">
					个人中心
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var rollSlider = mui("#slider");
		//每个1s中，播放一张图
		rollSlider.slider({
			interval: 1500
		});
	</script>
	<style type="text/css">
		body{
			background: white;
		}
		
		.header {
			width: 100%;
			height: 50vw;
			/*background-image: url(img/background.png);*/
			background-size: 100% 100%;
			color: white;
			font-weight: 900;
			text-align: center;
		}
		
		.header .title {
			text-align: center;
			padding: 10px;
		}
		
		.header .main {
			display: block;
			width: 50%;
			/*background: grey;*/
			margin-left: 25%;
		}
		
		.header .info {
			text-align: center;
			padding: 0 30px;
		}
		
		.header .info2 {
			/*text-align: center;*/
			display: flex;
			padding: 0 30px;
		}
		
		.header .info2 .right {
			padding-left: 10px;
		}
		
		.header .info2 img {
			width: 60px;
			height: 60px;
			border-radius: 100px;
			border: 3px solid #FFF8DC;
		}
		
		.header .info2 .name {
			font-size: 1.1em;
			/*padding: 10px;*/
			/*flex: 1;*/
			padding-top: 10px;
		}
		
		.header .info2 .position {
			background: white;
			color: orange;
			border-radius: 100px;
			padding: 2px 10px;
			font-size: 0.8rem;
		}
		
		.header .info img {
			width: 60px;
			height: 60px;
			border-radius: 100px;
			border: 3px solid #FFF8DC;
		}
		
		.header .info .name {
			font-size: 1.1em;
			padding: 10px;
			/*flex: 1;*/
		}
		
		.header .info .position {
			background: white;
			color: orange;
			border-radius: 100px;
			padding: 2px 10px;
			font-size: 0.8em;
		}
		
		.options {
			overflow: hidden;
			margin-bottom: 100px;
		}
		
		.options .list {
			height: 22vw;
			width: 22%;
			background: white;
			text-align: center;
			float: left;
			margin-left: 2.5%;
			margin-top: 2.5vw;
			font-size: 0.8rem;
		}
		
		.options .list .image {
			width: 50%;
			height: 50%;
			/*border-radius: 100px;*/
			margin-top: 15%;
			margin-left: 25%;
			margin-bottom: 5px;
		}
		
		.options .list .image img {
			/*padding-top: 20%;*/
			width:100%;
			height:100%;
		}
		
		.search {
			text-align: center;
			padding: 15px 0 10px;
		}
		
		.search button {
			width: 60%;
			height: 50px;
			background: deepskyblue;
			color: white;
			font-size: 1.2em;
			border: 0;
		}
		
		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			background: white;
			padding: 5px;
			font-size: 0.8em;
			border-top: 1px solid lightgrey;
		}
		
		.bottom div {
			flex: 1;
			text-align: center;
			background: white;
		}
		
		.bottom div img {
			width: 30px;
			height: 30px;
			text-align: center;
		}
		
		.active {
			color: dodgerblue;
		}
	</style>

</html>